<template>
  <div class="recharge-details_mod" :class="themeClass">
    <v-nav :title="$t('WithdrawDetails.Withdrawal details')" v-if="isDayTime === false" title_color="#fff" :class="themeClass"></v-nav>
    <v-nav :title="$t('WithdrawDetails.Withdrawal details')" v-if="isDayTime === true"></v-nav>
    <div class="recharge-details_mod_box">
      <div class="recharge-details_mod_box_list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
          <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
            <van-cell v-for="(item, index) in withdrawalList" :key="index" center :title="titleShow(item)" :value="statusShow(item.audit_status).text" :label="item.create_time" :class="statusShow(item.audit_status).colorClass" />
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'withdrawDetails',
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      withdrawalList: [],
      isDayTime: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  methods: {
    async getWithdrawList() {
      await this.$https.post('/wallet/withdrawList?page=' + this.page).then(res => {
        if (this.refreshing) {
          this.withdrawalList = []
          this.refreshing = false
        }
        this.withdrawalList = [...this.withdrawalList, ...res.data.data]
        this.loading = false

        if (this.page >= res.data.last_page) {
          this.finished = true
        } else {
          this.page++
        }
      })
    },
    titleShow(item) {
      if (item.amount === '') {
        return
      }
      return item.order_no + ' ' + item.amount + ' ' + item.currency + ' ' + item.commission + item.currency + ' ' + item.received_amount + item.currency
    },
    statusShow(status) {
      let statusObj = {}
      switch (status) {
        case '0':
          statusObj = {
            text: this.$t('info.info14'),
            colorClass: ''
          }
          break
        case '1':
          statusObj = {
            text: this.$t('info.info15'),
            colorClass: 'success'
          }
          break
        case '2':
          statusObj = {
            text: this.$t('info.info16'),
            colorClass: 'refuse'
          }
          break
      }
      return statusObj
    },
    // 上拉加载处理函数
    onLoad() {
      this.getWithdrawList()
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.page = 1
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../RechargeDetails/index.less');
</style>
